<template>
  <div>
    <div class="content">
     
      <div class="area">
        <div style="width: 96%;margin: 0 auto;">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
          <el-tab-pane label="管理员登录" name="first">
           
            <div class="table-area">
          <el-table
            border
            :data="dataList"
            stripe
            style="width: 100%;height: 100px;"
                   v-loading="loading"
    element-loading-text="开发中..."
          >
            <el-table-column
              prop="id"
              align="center"
              label="账号"
              #default="scope"
              
            >
             
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="事件"
              #default="scope"
              
            >
              
              
                
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="leixin"
              label="IP"
            />
            <el-table-column
              align="center"
              prop="jiajia"
              label="IP地址"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="备注"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="日期"
              #default="scope"
            >
           
            </el-table-column>
         
          </el-table>
        </div>
         <!-- 定价模版新增 -->
    <el-dialog
      v-model="mobanShow"
      :show-close="false"
      draggable
      title="添加"
      width="56%"
    >
      <div class="img-area">
        <div>
          <div class="jibies">
            <el-form-item label="模版名称" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="区间开始金额">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="区间结束金额">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="级别差价" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="定价策略" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="我的利润" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px" />
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="一级服务商" style="margin-left: 12px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="尊贵铂金" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="荣耀黄金" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="秩序白银" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
          <div class="jibies">
            <el-form-item label="普通会员" style="margin-left: 28px;">
              <el-input v-model="input2" style="width: 500px">
                <template #append>元 + 商品销售价</template>
              </el-input>
            </el-form-item>
          </div>
        </div>
		
      </div>
	  <div style="display: flex;justify-self: center;">
			<el-button type="primary" plain @click="mobanClose">取消</el-button>
            <el-button type="primary">保存</el-button>
		</div>
    </el-dialog>
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
          <el-tab-pane label="管理员操作" name="second">
            
            <div class="table-area">
              <el-table
            border
            :data="dataList"
            stripe
            style="width: 100%;height: 100px;"
              v-loading="loading"
    element-loading-text="开发中..."
          >
            <el-table-column
              prop="id"
              align="center"
              label="账号"
              #default="scope"
              
            >
             
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="事件"
              #default="scope"
              
            >
              
              
                
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="leixin"
              label="IP"
            />
            <el-table-column
              align="center"
              prop="jiajia"
              label="IP地址"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="备注"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="日期"
              #default="scope"
            >
           
            </el-table-column>
         
          </el-table>
        </div>
      
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
          <el-tab-pane label="用户登录" name="second2">
         
            <div class="table-area">
              <el-table
            border
            :data="dataList"
            stripe
              style="width: 100%;height: 100px;"
              v-loading="loading"
    element-loading-text="开发中..."
          >
            <el-table-column
              prop="id"
              align="center"
              label="账号"
              #default="scope"
              
            >
             
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="事件"
              #default="scope"
              
            >
              
              
                
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="leixin"
              label="IP"
            />
            <el-table-column
              align="center"
              prop="jiajia"
              label="IP地址"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="备注"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="日期"
              #default="scope"
            >
           
            </el-table-column>
         
          </el-table>
        </div>
      
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
          <el-tab-pane label="用户操作" name="second3">
          
            <div class="table-area">
              <el-table
            border
            :data="dataList"
            stripe
             style="width: 100%;height: 100px;"
              v-loading="loading"
    element-loading-text="开发中..."
          >
            <el-table-column
              prop="id"
              align="center"
              label="账号"
              #default="scope"
              
            >
             
            </el-table-column>
            <el-table-column
              prop="name"
              align="center"
              label="事件"
              #default="scope"
              
            >
              
              
                
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="leixin"
              label="IP"
            />
            <el-table-column
              align="center"
              prop="jiajia"
              label="IP地址"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="备注"
              #default="scope"
            >
           
            </el-table-column>
            <el-table-column
              align="center"
              prop="jiajia"
              label="日期"
              #default="scope"
            >
           
            </el-table-column>
         
          </el-table>
        </div>
      
        <!-- 新增分页组件 -->
        <div class="pagination-container">
          <el-pagination
            :current-page="currentPage"
            :page-size="pageSize"
            :total="total"
            :page-sizes="[10, 20, 30, 50]"
            layout="total, sizes, prev, pager, next, jumper"
            @size-change="handlePageSizeChange"
            @current-change="handleCurrentPageChange"
          />
        </div>
          </el-tab-pane>
          <el-tab-pane label="短信日志" name="second4">
          
          <div class="table-area">
            <el-table
          border
          :data="dataList"
          stripe
           style="width: 100%;height: 100px;"
            v-loading="loading"
    element-loading-text="开发中..."
        >
          <el-table-column
            prop="id"
            align="center"
            label="用户ID"
            #default="scope"
            
          >
           
          </el-table-column>
          <el-table-column
            prop="name"
            align="center"
            label="手机号码"
            #default="scope"
            
          >
            
            
              
         
          </el-table-column>
          <el-table-column
            align="center"
            prop="leixin"
            label="IP地址"
          />
          <el-table-column
            align="center"
            prop="jiajia"
            label="日期"
            #default="scope"
          >
         
          </el-table-column>
          <el-table-column
            align="center"
            prop="jiajia"
            label="内容"
            #default="scope"
          >
         
          </el-table-column>
       
       
        </el-table>
      </div>
    
      <!-- 新增分页组件 -->
      <div class="pagination-container">
        <el-pagination
          :current-page="currentPage"
          :page-size="pageSize"
          :total="total"
          :page-sizes="[10, 20, 30, 50]"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handlePageSizeChange"
          @current-change="handleCurrentPageChange"
        />
      </div>
        </el-tab-pane>
        </el-tabs>
        </div>
      
      </div>
    </div>

    <!-- 详情 -->
    <el-drawer v-model="drawer" :size="'50vw'" :with-header="false">
      <div class="contents-title">
        <div>订单信息</div>
        <div><el-button type="primary">订单处理</el-button></div>
      </div>
      <div class="img-content">
        <div class="img-left">
          <div>
            <img
              class="imgsleft"
              v-if="orderObj.headurl_img"
              :src="orderObj.headurl_img"
              alt=""
            />
            <el-icon
              class="icons2"
              v-if="!orderObj.headurl_img"
              :size="50"
              :color="color"
            >
              <PictureFilled />
            </el-icon>
          </div>
        </div>
        <div class="right-name">
          <div>{{orderObj.company}}</div>
          <div class="bianhao">
            等级： {{ dengji}}
            <span
              @click="btnOrdersn2(orderObj.ordersn)"
              style="position: relative; top: 2px; cursor: pointer"
              ><el-icon> <CopyDocument /> </el-icon
            ></span>
          </div>
        </div>
      </div>

      <div class="types">
        <div class="type-name">
          <div>余额</div>
          <div class="quxiao">
            <div class="table-name" >
                {{orderObj.balance}}元
            </div>
           
          </div>
        </div>
        <div class="type-name">
          <div>佣金</div>
          <div style="margin-top: 8px">￥{{ orderObj.commission_money }}</div>
        </div>
        <div class="type-name">
          <div>冻结</div>
          <div style="margin-top: 8px">￥{{ orderObj.freez_money }}</div>
        </div>
        <div class="type-name">
          <div>消费金额</div>
          <div style="margin-top: 8px">
            {{ orderObj.cost || "" }}
          </div>
        </div>
        <div class="type-name">
          <div>供货余额</div>
          <div style="margin-top: 8px">
            {{ orderObj.supply_money || "" }}
          </div>
        </div>
        <div class="type-name">
          <div>推广收入</div>
          <div style="margin-top: 8px">
            {{ orderObj.income || "" }}
          </div>
        </div>
      </div>
      <div class="areas">
        <div class="areas-header">
          <div class="area-tab">
            <div
              class="area-name"
              v-for="(item, index) in tabsList"
              :key="index"
              :class="{ activeTabs: activeTab == index }"
              @click="btnActive(index)"
            >
              {{ item.name }}
            </div>
          </div>
          <!-- 订单详情 -->
          <div class="area-tabs">
            <div v-show="activeTab == 0">
              <div class="order-detail">
                <div class="order-information" style="font-size: 14px">
                  <div class="shu"></div>
                  <span style="position: relative; left: 12px">基础信息</span>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      客户编号：{{ orderObj.id || "" }}
                    </div>
                    <div class="orders-names" style="width: 360px">
                      登录账号：{{ orderObj.username }}
                    </div>
                    <div class="orders-names">
                      真实姓名：{{ orderObj.name }}
                    </div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      手机号码：{{ orderObj.mobile || "" }}
                    </div>
                    <div class="orders-names" style="width: 360px">
                    邮箱：{{ orderObj.email }}
                    </div>
                    <div class="orders-names">
                      用户地址：{{ orderObj.address }}
                    </div>
                  </div>
                 
                </div>
              </div>
              <div class="order-detail" >
                <div class="order-information" style="font-size: 14px">
                  <div class="shu"></div>
                  <span style="position: relative; left: 12px">安全管理</span>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names">
                    <div class="orders-names" style="width: 360px">
                      登录密码： <el-switch v-model="orderObj.noneed_userinput_pass" />
                     
                    </div>
                    <div class="orders-names" style="width: 360px">
                      交易密码: <el-switch v-model="orderObj.noneed_userinput_pass" />
                      <!-- <span style="color: #1890ff;">交易密码</span> -->
                    </div>
                    <div class="orders-names" style="width: 360px">
                      微信绑定： <span>{{orderObj.weixin_nickname}}</span>
                         <span v-show="orderObj.weixin_nickname" style="color: #1890ff;">解绑</span>
                         <span v-show="!orderObj.weixin_nickname" >无绑定</span>
                    </div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 298px">
                      QQ登录：{{ orderObj.quantity }}
                      <span v-show="orderObj.quantity" style="color: #1890ff;">解绑</span>
                      <span v-show="!orderObj.quantity" >无绑定</span>
                    </div>
                    <div class="orders-names" style="width: 360px">
                      接口密钥： <span style="color: #1890ff;">重置密钥</span>
                    </div>
                 
                  </div>
             
                </div>
              </div>

              <div class="order-detail" style="height: 192px">
                <div class="order-information">
                  <div class="shu"></div>
                  <span style="position: relative; left: 12px">用户概况</span>
                </div>
                <div style="margin-top: 12px">
                  <div class="order-names">
                    <div class="orders-names" style="width: 298px">
                      用户状态：
                      <el-switch v-model="orderObj.status" />
                    </div>
                    <div class="orders-names" style="width: 358px">
                      用户等级：
                     
                        <!-- <el-table :data="dataUser" stripe style="width:60%">
                        <el-table-column prop="lable" label="用户等级" />
                       
                      </el-table> -->
                      {{ dengji}}
                      
                    </div>
                    <div class="orders-names">上级用户：{{ orderObj.pid }}<span style="color: #1890ff;">强行解绑</span></div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 358px">
                      注册时间：{{ orderObj.reg_time }}
                    </div>
                    <div class="orders-names" style="width: 358px">
                     登录时间：{{ orderObj.last_login_time }}
                    </div>
                    <div class="orders-names" style="width: 358px">
                      注册IP地址：{{ orderObj.reg_ip }}
                    </div>
                  </div>
                  <div class="order-names">
                    <div class="orders-names" style="width: 358px">
                    是否团长：<el-switch v-model="orderObj.is_team_head" />
                    </div>
                    <div class="orders-names" style="width: 358px">
                     供货权限：<el-switch v-model="orderObj.owner_goods" />
                    </div>
                    <div class="orders-names" style="width: 358px">
                      转账权限： <el-button type="primary" size="small">配置</el-button>
                    </div>
                  </div>
                  
                </div>
              </div>

           
            </div>
            <!-- 余额明细 -->
            <div v-show="activeTab == 1">
              
              <!-- <div class="zanwu" v-show="!zanwuShow">暂无操作</div> -->
              <el-form :inline="true" style="margin-top:20px;" :model="formInline" class="demo-form-inline">
          <el-form-item label="客户编号" >
            <el-form-item >
            <el-input
              v-model="formInline._key_word"
              placeholder="请输入关键字"
              clearable
              
            />
          </el-form-item>
            <el-select
              v-model="formInline.key_type"
              placeholder="全部类型"
              style="width: 200px"
              @change="getselect1()"
            >
              <el-option
                v-for="item in searchselectdata"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        
          <el-form-item  style="width: 200px">
            <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="Select date and time"
            />
          </el-form-item>
          <el-button type="primary" @click="submitSee" style="position: relative;top: -10px;">查询</el-button>
        </el-form>
              <el-table :data="tableData4" style="width: 100%">
                <el-table-column prop="money" label="客户编号" />
                <el-table-column prop="oper" label="昵称" />
                <el-table-column prop="_create_time" label="交易类型" />
                <el-table-column prop="_create_time" label="变动类型" />
                <el-table-column prop="_create_time" label="交易金额" />
                <el-table-column prop="_create_time" label="变化(前)" />
                <el-table-column prop="_create_time" label="变化(后)" />
                <el-table-column prop="_create_time" label="交易日期" />
   
                <el-table-column prop="_create_time" label="操作" >
                  <el-button type="primary" size="small">详情</el-button>
                  </el-table-column>
              </el-table>
            </div>

            <!-- 支付记录 -->
            <div v-show="activeTab == 2">
              <el-table :data="tableData4" style="width: 100%;margin-top: 24px">
                <el-table-column prop="money" label="支付时间" />
                <el-table-column prop="oper" label="支付类型" />
                <el-table-column prop="_create_time" label="金额" />
                <el-table-column prop="_create_time" label="手续费" />
                <el-table-column prop="_create_time" label="支付金额" />
                <el-table-column prop="_create_time" label="商户单号" />
                <el-table-column prop="_create_time" label="支付网关" />
                <el-table-column prop="_create_time" label="支付客户" />
                <el-table-column prop="_create_time" label="支付状态" />
                <el-table-column prop="_create_time" label="支付返回时间" />
                <el-table-column prop="_create_time" label="返回或处理备注" />
                <el-table-column prop="_create_time" label="详情" >
                  <el-button type="primary" size="small">详情</el-button>
                  </el-table-column>
              </el-table>
            </div>
            <!-- 佣金明细 -->
            <div v-show="activeTab == 3" style="margin-top: 24px">
              <el-form :inline="true" style="margin-top:20px;" :model="formInline" class="demo-form-inline">
          <el-form-item label="客户编号" >
            <el-form-item >
            <el-input
              v-model="formInline._key_word"
              placeholder="请输入关键字"
              clearable
              
            />
          </el-form-item>
          <el-form-item label="">
            <el-select
              v-model="formInline.key_type"
              placeholder="全部类型"
              style="width: 200px"
              @change="getselect1()"
            >
              <el-option
                v-for="item in searchselectdata"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
           
          </el-form-item>
        
          <el-form-item  style="width: 200px">
            <el-date-picker
              v-model="value1"
              type="datetime"
              placeholder="Select date and time"
            />
          </el-form-item>
          <el-button type="primary" @click="submitSee" style="position: relative;top: -10px;">查询</el-button>
        </el-form>
              <el-table :data="tableData4" style="width: 100%">
                <el-table-column prop="money" label="客户编号" />
                <el-table-column prop="oper" label="昵称" />
                <el-table-column prop="_create_time" label="交易类型" />
                <el-table-column prop="_create_time" label="变动类型" />
                <el-table-column prop="_create_time" label="交易金额" />
                <el-table-column prop="_create_time" label="变化(前)" />
                <el-table-column prop="_create_time" label="变化(后)" />
                <el-table-column prop="_create_time" label="交易日期" />
   
                <el-table-column prop="_create_time" label="操作" >
                  <el-button type="primary" size="small">详情</el-button>
                  </el-table-column>
              </el-table>
            </div>
            <!-- 客户登录日志 -->
            <div v-show="activeTab == 4" style="margin-top: 24px">
              <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="商品信息" style="width: 200px">
            <el-select
              v-model="formInline.key_type"
              placeholder="用户ID"
              style="width: 200px"
              @change="getselect1()"
            >
              <el-option
                v-for="item in searchselectdata"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item >
            <el-input
              v-model="formInline._key_word"
              placeholder="请输入关键字"
              clearable
              disabled
            />
          </el-form-item>
          <el-form-item  style="width: 200px">
            <el-select
              v-model="formInline.key_type"
              placeholder="登录状态"
              style="width: 200px"
              @change="getselect1()"
            >
              <el-option
                v-for="item in searchselectdata"
                :key="item.value"
                :label="item.lable"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-button type="primary" @click="submitSee" style="position: relative;top: -10px;">查询</el-button>
        </el-form>
              <el-table :data="tableData4" style="width: 100%">
                <el-table-column prop="money" label="用户ID" />
                <el-table-column prop="oper" label="用户名" />
                <el-table-column prop="_create_time" label="状态" />
                <el-table-column prop="_create_time" label="IP" />
                <el-table-column prop="_create_time" label="地区1" />
                <el-table-column prop="_create_time" label="地区2" />
                <el-table-column prop="_create_time" label="时间" />
              </el-table>
            </div>
          
          </div>
        </div>
      </div>
    </el-drawer>
    <!-- 图片预览对话框 -->
    <div class="image-overlay">
      <el-dialog v-model="imgShow" :show-close="false" width="36%">
        <img style="width: 100%" :src="currentImage" alt="" />
      </el-dialog>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, onBeforeUnmount } from "vue";
const activeName=ref('first')
const mobanShow=ref(false)
const dataList=ref([
  {
    id:'111111',
    name:'测试',
    leixin:'全部累加',
    jiajia:'共享',
    time:'2024-12-12 23:12:12'
  }
])
const loading=ref(true)
const dataList2=ref([
  {
 
    name:'测试',
    jiner:'1214',
    leixin:'金额叠加',
    dizeng:'1.00000',
    guizhe:'11222',
    type:true
  }
])
//打开新增
function btnAdd(){
  mobanShow.value=true
}
</script>
<style>
.el-input.is-disabled .el-input__wrapper {
  background: white !important;
}</style>
<style scoped>
.deep .el-input.is-disabled .el-input__wrapper {
  background: white !important;
}

.table-area {
  width: 98%;
  margin: 0 auto;
  margin-top: 30px;
}

.tab-header {
  display: flex;
  width: 100%;
}

.area {
  width: 100%;
  background-color: white;
  padding-bottom: 28px;
  margin-top: 18px;
  padding-top: 14px;
}

.content {
  width: 96%;
  margin: 0 auto;
  height: 80vh;
  margin-top: 26px;
}

.header {
  background-color: white;
  padding: 17px 0 1px 12px;
  border-radius: 8px;
}

.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 基础响应式设置 */
.content {
  width: 96%;
  margin: 0 auto;
  margin-top: 26px;
  padding-bottom: 20px;
}

/* 表格区域响应式 */
.table-area {
  width: 100%;
  margin: 0 auto;
  margin-top: 20px;
  overflow-x: auto;
}

/* 分页容器 */
.pagination-container {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  overflow-x: auto;
}

/* 对话框内容 */
.diolog-content {
  padding: 10px;
}

/* 标签页区域 */
.tabs-area {
  margin-top: 12px;
}

/* 配置区域 */
.configurations {
  margin-top: 12px;
}

/* 对话框底部按钮 */
.dialog-footer {
  margin: 20px auto 0;
  text-align: center;
}
.nameshopping {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  width: 70px;
  cursor: pointer;
  text-align: center;
}
.nameshopping:hover {
  color: #1890ff;
}
/* 订单区域 */
.order-area {
  width: 100%;
  padding: 12px;
  border: 1px solid #409eff;
  background-color: #e8f4ff;
  box-sizing: border-box;
}

/* 刷新按钮样式 */
.shuaxin {
  font-size: 12px;
  color: #409eff;
  padding-right: 2px;
  cursor: pointer;
}

/* 加载动画 */
.is-loading {
  animation: rotating 2s linear infinite;
}

@keyframes rotating {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

/* 响应式调整 */
@media (max-width: 768px) {
  /* 头部表单 */
  .header {
    padding: 10px;
  }

  /* 表单项目 */
  .el-form-item {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
  }

  /* 标签页 */
  .el-tabs {
    overflow-x: auto;
  }

  /* 对话框内容 */
  .diolog-content {
    padding: 5px;
  }

  /* 输入框宽度 */
  .el-input {
    width: 100% !important;
  }

  /* 表格操作按钮 */
  .el-table-column--fixed-right .el-button {
    margin-bottom: 5px;
  }

  /* 标签页头 */
  .tab-header {
    flex-direction: column;
  }

  .tabs {
    margin: 5px 0;
  }

  /* 对话框标题 */
  .el-dialog__title {
    font-size: 16px;
  }
}

/* PC端特定样式 */
@media (min-width: 769px) {
  .content {
    /* max-width: 1200px; */
  }

  .table-area {
    width: 98%;
  }

  .diolog-content {
    min-width: 500px;
  }

  .el-form--inline .el-form-item {
    margin-right: 10px;
  }
}
</style>
